<template>
  <div class="shopcart-container">
    <!-- 收货地址区域 -->
    <div class="address-container">
      <van-cell title="收货地址" is-link :to="{name:'addressList',query:{addressId:address.id}}">
        <template #label>
          <van-row>姓名：{{address.name}}</van-row>
          <van-row>电话：{{address.tel}}</van-row>
          <van-row>地址：{{address.city+address.county+address.address_detail}}</van-row>
        </template>
      </van-cell> 
    </div>

    <!--商品列表-->
    <div class="goods-list-container">
      <van-card v-for="item in goodsList" :key="item.id" :num="item.count" :price="item.price" :title="item.name"
        :desc="item.title" :thumb="APIDomainName+item.pic" class="goods-card" />
    </div>

    <!--配送信息-->
    <van-cell title="配送服务" label="快递运输,工作日、双休日与节假日均可送货" class="delivery-cell" />

    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" placeholder="请输入订单备注" class="remark-field" />

    <!--运费信息-->
    <div class="price-info-container">
      <van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`" class="price-cell" />
      <van-cell title="运费" :value="`¥0.00`" class="price-cell" />
      <van-cell title="总价" :value="`¥${amount.toFixed(2)}`" class="price-cell" />
    </div>
    <!--创建订单按钮-->
    <van-button @click="OnClickCreateOrder" size="large" type="primary" class="create-order-button">创建订单</van-button>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { createOrderAPI } from "@/api/order.js";
import { getDefaultAddressAPI } from "@/api/address.js";
import { getCartListCheckedAPI } from "@/api/cart.js";

export default {
  data() {
    return {
      goodsList: [],
      remark: "",
      amount: 0,
      address: {},
    };
  },
  created() {
    if (this.$route.query.addressId) {
      //通过路由名 addressList 转来的
      this.address.id = this.$route.query.addressId;
    }
    this.initDefaultAddress(); //初始默认收货地址
    this.initCartListByChecked(); //初始订单商品（购物车勾选商品）
  },
  methods: {
    //初始订单商品（购物车勾选商品）
    initCartListByChecked() {
      getCartListCheckedAPI().then(result => {
        this.goodsList = result.data;
        this.amount = 0;
        this.goodsList.forEach((item) => {
          this.amount += item.count * item.price;
        });
      });
    },
    //初始默认收货地址
    initDefaultAddress() {
      getDefaultAddressAPI(this.address.id).then(result => {
        if (result.data.length == 1) {
          this.address = result.data[0];
        } else {
          //如果没有默认收货地址，提示后导航到地址列表页面（该页面还未实现）
          showToast("请先添加收货地址");
          this.$router.replace({
            name: "addressList",
            query: { addressId: 9999999999 }
          });
        }
      });
    },
    //处理创建订单
    OnClickCreateOrder() {
      let productList = [];
      this.goodsList.forEach((item) =>
        productList.push({
          product_id: item.product_id,
          count: item.count,
          price: item.price,
        })
      );

      //根据接口文档，准备接口参数
      let params = {
        address_id: this.address.id,
        productList: productList,
        remark: this.remark,
      };
      createOrderAPI(params).then(result => {
        showToast(result.msg);
        //创建成功后导航到订单列表页面（该页面还未实现）
        this.$router.push({ name: "orderList" });
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 浅粉色系变量
@bgColor: #FFF5F7;           // 页面背景
@headerBg: #FFE4E9;         // 标题背景
@cardBg: #FFFFFF;           // 卡片背景
@mainColor: #FF69B4;        // 主色调
@priceColor: #FF4D92;       // 价格颜色
@textPrimary: #333333;      // 主要文字
@textSecondary: #666666;    // 次要文字
@shadowColor: rgba(255, 105, 180, 0.1); // 阴影颜色

.shopcart-container {
  display: flex;
  flex-direction: column;
  background: @bgColor;
  overflow: hidden;
  padding: 15px;
}

// 收货地址区域样式
.address-container {
  background-color: @cardBg;
  border-radius: 12px;
  box-shadow: 0 2px 4px @shadowColor;
  margin-bottom: 15px;
  padding: 15px;
}

// 商品列表区域样式
.goods-list-container {
  margin-bottom: 15px;
}
.goods-card {
  background-color: @cardBg;
  border-radius: 12px;
  box-shadow: 0 2px 4px @shadowColor;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}
.goods-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(255, 105, 180, 0.15);
}
.van-card__title {
  font-size: 16px;
  color: @textPrimary;
}
.van-card__desc {
  color: @textSecondary;
}
.van-card__thumb {
  border-radius: 12px 12px 0 0;
}

// 配送信息单元格样式
.delivery-cell {
  background-color: @cardBg;
  border-radius: 12px;
  box-shadow: 0 2px 4px @shadowColor;
  margin-bottom: 15px;
  padding: 10px 15px;
}

// 订单备注输入框样式
.remark-field {
  background-color: @cardBg;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
}

// 运费信息区域样式
.price-info-container {
  margin-bottom: 15px;
}
.price-cell {
  background-color: @cardBg;
  border-radius: 12px;
  box-shadow: 0 2px 4px @shadowColor;
  margin-bottom: 10px;
  padding: 10px 15px;
}

// 创建订单按钮样式
.create-order-button {
  background-color: @mainColor;
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 24px;
  transition: background-color 0.2s ease;
}
.create-order-button:hover {
  background-color: @priceColor;
}

// 响应式设计
@media (max-width: 768px) {
 .goods-card {
    flex-direction: column;
    align-items: center;
  }
 .goods-card .van-card__thumb {
    width: 80%;
    height: auto;
  }
}
@media (max-width: 480px) {
 .create-order-button {
    padding: 10px 20px;
    font-size: 14px;
  }
}
</style>